<template>
  <scroll-view class="wuc-tab" :class="tabClass" :style="tabStyle" scroll-with-animation scroll-x :scroll-left="scrollLeft" style="background: #fff">
    <div v-if="!textFlex">
      <div class="wuc-tab-item" :class="[index === tabCur ? selectClass + ' cur':'']" v-for="(item,index) in tabList" :key="index" :id="index" @tap="tabSelect(index,$event)">
        <text :class="item.icon"></text>
        <span>{{item.name}}</span>
      </div>
    </div>

    <div class="flex text-center" v-if="textFlex">
      <div class="wuc-tab-item flex-sub" :class="index === tabCur ? selectClass + ' cur':''" v-for="(item,index) in tabList" :key="index" :id="index" @tap="tabSelect(index,$event)">
        <text :class="item.icon"></text>
        <span>{{item.name}}</span>
      </div>
    </div>
  </scroll-view>
</template>
<script>
  export default {
    name: 'wuc-tab',
    data() {
      return {};
    },
    props: {
      tabList: {
        type: Array,
        default() {
          return [];
        }
      },
      tabCur: {
        type: Number,
        default() {
          return 0;
        }
      },
      tabClass: {
        type: String,
        default() {
          return '';
        }
      },
      tabStyle: {
        type: String,
        default() {
          return '';
        }
      },
      textFlex: {
        type: Boolean,
        default() {
          return true;
        }
      },
      selectClass: {
        type: String,
        default() {
          return 'text-blue';
        }
      }
    },
    methods: {
      tabSelect(index, e) {
        if (this.currentTab === index) return false;
        this.$emit('update:tabCur', index);
        this.$emit('change', index);
      }
    },
    computed: {
      scrollLeft() {
        return (this.tabCur - 1) * 60;
      }
    }
  };
</script>
<style>
  div,
  scroll-view,
  swiper {
    box-sizing: border-box;
  }
  .wuc-tab {
    white-space: nowrap;
  }
  .wuc-tab-item {
    height: 90upx;
    display: inline-block;
    line-height: 90upx;
    margin: 0 10upx;
    padding: 0 20upx;
    font-size: 15px;
  }

  .wuc-tab-item.cur {
    border-bottom: 4upx solid;
  }

  .wuc-tab.fixed {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1024;
    box-shadow: 0 1upx 6upx rgba(0, 0, 0, 0.1);
  }

  .flex {
    display: flex;
  }
  .text-center {
    text-align: center;
  }
  .flex-sub {
    flex: 1;
  }
  .text-blue{
    color:#5677fc;
  }
  .text-white{
    color:#ffffff;
  }
  .bg-white{
    background-color: #ffffff;
  }
  .bg-blue{
    background-color: #c00000;
  }
  .text-orange{
    color: #f37b1d
  }

  .text-xl {
    font-size: 36upx;
  }
</style>
